<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>表单格式化</title>
  </head>
  <body>
  <!--
    表单使用细节
    1. action表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)
    2. method 表示提交的方式 主要是get / post, 默认是get
    3. 如果form表单的元素，没有写name属性，则数据不会提交
    4. 对应select checkbox radio 标签，提交的数据是value指定的值
    5. 对应checkbox 复选框，可以提交多个字，但是name是统一的，都是sport sport=xx&sport=yy
    6. 提交的数据，一定要放在 form标签内，否则数据不会提交
    Get 和 Post 的区别简述
    1. Get 请求数据是显示在浏览器地址栏 http://localhost:63342/html/ok.html?username=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender=male&city=bj&myfile=
    2. Get 请求不安全的，而且数据是有长度限制的, 建议有重要信息，不要使用Get
    3. Post 请求数据是和http传输的，在http体中，相对安全
    4. Post 传输的数据长度理论上没有限制，但是在实际的应用中，也不能太大 , 即合理即可
 -->
  <form action="13.form_login_ok.html" method="post">
    <h1>用户注册信息</h1>
    <table>
      <tr>
        <td>用户名称: </td>
        <td><input type="text" name="username"></td>
      </tr>
      <tr>
        <td>用户密码: </td>
        <td><input type="password" name="pwd1"></td>
      </tr>
      <tr>
        <td>确认密码: </td>
        <td><input type="password" name="pwd2"></td>
      </tr>
      <tr>
        <td>选择你喜欢的运动项目:</td>
        <td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球</td>
      </tr>
      <tr>
        <td>请选择性别 :</td>
        <td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女</td>
      </tr>
      <tr>
        <td>请选择城市:</td>
        <td><select name="city">
          <option>--选择--</option>
          <option value="cd">成都</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
        </select></td>
      </tr>
      <tr>
        <td>自我介绍:</td>
        <td><textarea rows="6" cols="20"></textarea></td>
      </tr>
      <tr>
        <td>选择你的文件(头像)</td>
        <td><input type="file" name="myfile"></td>
      </tr>
      <tr>
        <td><input type="submit" value="提交"/></td>
        <td><input type="reset" value="重置"/></td>
      </tr>
    </table>
  </form>
  </body>
</html>